<template>
	<div class="boxStyle">
		<el-row type="flex" class="row-bg" justify="start" style="margin-bottom: 10px;">
			<el-col :span="1" style="margin-top: 5px;padding-left: 10px;">功能 :</el-col>
			<el-col :span="3">
				<el-input v-model="title" size="small"></el-input>
			</el-col>
			<el-col :span="1" style="margin-left: 20px;margin-top: 5px; ">操作内容 :</el-col>
			<el-col :span="3">
				<el-input v-model="content" size="small"></el-input>
			</el-col>
			<el-col :span="1" style="margin-left: 20px;margin-top: 5px;padding-left: 10px;">操作人 :</el-col>
			<el-col :span="3">
				<el-input v-model="username" size="small"></el-input>
			</el-col>
			<el-col :span="1" style="margin-left:20px;">
				<el-button type="warning" size="small" @click="search" icon="el-icon-search">查找</el-button>
			</el-col>
		</el-row>
		<el-table ref="multipleTable" stripe border :data="tableLists" tooltip-effect="dark" style="margin-bottom: 10px;width: 100%">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="title" label="功能" width="120"></el-table-column>
			<el-table-column prop="content" label="操作内容" width="350"></el-table-column>
			<el-table-column prop="username" label="操作者" width="120"></el-table-column>
			<el-table-column prop="createDate" label="操作时间" :formatter="dataForm"></el-table-column>
		</el-table>
		<el-pagination background @current-change="handleCurrentChange" :current-page="currentPage" :page-size="size" layout="prev, pager, next,total, slot" :total="totals">
			<span style="margin-top: -2px;color: #606266;font-weight: 100;">第<el-input type="text" v-model="inputPage" style="width: 60px;margin: 0 5px;"/>页<el-button size="mini" style="background: #409EFF; color: #fff;margin:0 5px;" @click="handleCurrentChange(inputPage)">跳转</el-button><span>总计{{totalPage}}页</span></span>
		</el-pagination>
	</div>
</template>

<script>
	import axios from "axios"
	import qs from "qs"
	export default {
		data() {
			return {
				title: "",
				content: "",
				username: "",
				currentPage: 1, //当前页
				totals: 0, //分页总条数
				size: 0, //每页条数
				tableLists: [],
				inputPage: 1,
				totalPage: 0, //总页数
			}
		},
		activated() {
			this.title="";
			this.content="";
			this.username= "";
			this.load(1);
			this.currentPage =1;
			this.inputPage = this.currentPage;
		},
		methods: {
			load(num) {
				axios.get("interface/log?pageNo=" + num + "").then((res) => {
					this.tableLists = res.data.data.logs; //list数据
					this.totals = res.data.data.pageBean.totalRow; //总条数
					this.size = res.data.data.pageBean.pageSize; //每页条数
					this.totalPage = res.data.data.pageBean.totalPage; //总页数
				})
			},
			dataForm(row, column) {
				var date = new Date(parseInt(row.createDate)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
				if(date == undefined) {
					return "";
				}
				return date;
			},
			handleCurrentChange(val) {
				this.currentPage = val - 0; //当前页
				this.inputPage = val;
				//查找的分页跳转
				axios.post("interface/log?", qs.stringify({
					title: this.title,
					content: this.content,
					username: this.username,
					pageNo: val
				})).then((res) => {
					this.tableLists = res.data.data.logs; //list数据
					this.totals = res.data.data.pageBean.totalRow; //总条数
					this.size = res.data.data.pageBean.pageSize; //每页条数
					this.totalPage = res.data.data.pageBean.totalPage; //总页数
				})
			},
			search() {
				this.inputPage=1;
				this.currentPage=1;
				axios.post("interface/log?", qs.stringify({
					title: this.title,
					content: this.content,
					username: this.username,
					pageNo: 1
				})).then((res) => {
					this.tableLists = res.data.data.logs; //list数据
					this.totals = res.data.data.pageBean.totalRow; //总条数
					this.size = res.data.data.pageBean.pageSize; //每页条数
					this.totalPage = res.data.data.pageBean.totalPage; //总页数
				})
			}
		}
	}
</script>

<style>

</style>